<template>
  <view class="privacy-container">
    <!-- 顶部栏 -->
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="header-title">隐私设置</text>
      <view class="header-right"></view>
    </view>
    
    <!-- 隐私保护说明 -->
    <view class="privacy-intro">
      <text class="intro-text">我们重视您的隐私保护，以下设置可以帮助您控制个人信息的使用方式</text>
    </view>
    
    <!-- 基础隐私设置 -->
    <view class="privacy-section">
      <text class="section-title">基础设置</text>
      
      <view class="privacy-item">
        <view class="item-left">
          <text class="item-icon">🔒</text>
          <text class="item-text">私密模式</text>
        </view>
        <switch :checked="privateModeEnabled" @change="togglePrivateMode"/>
      </view>
      
      <view class="privacy-item">
        <view class="item-left">
          <text class="item-icon">👥</text>
          <text class="item-text">允许他人查看我的主页</text>
        </view>
        <switch :checked="allowViewProfile" @change="toggleAllowViewProfile"/>
      </view>
      
      <view class="privacy-item">
        <view class="item-left">
          <text class="item-icon">📱</text>
          <text class="item-text">允许通过手机号找到我</text>
        </view>
        <switch :checked="allowFindByPhone" @change="toggleAllowFindByPhone"/>
      </view>
    </view>
    
    <!-- 数据收集设置 -->
    <view class="privacy-section">
      <text class="section-title">数据收集</text>
      
      <view class="privacy-item">
        <view class="item-left">
          <text class="item-icon">📊</text>
          <text class="item-text">收集使用数据</text>
        </view>
        <switch :checked="collectUsageData" @change="toggleCollectUsageData"/>
      </view>
      
      <view class="privacy-item">
        <view class="item-left">
          <text class="item-icon">📍</text>
          <text class="item-text">收集位置信息</text>
        </view>
        <switch :checked="collectLocationData" @change="toggleCollectLocationData"/>
      </view>
      
      <view class="privacy-item">
        <view class="item-left">
          <text class="item-icon">🔍</text>
          <text class="item-text">搜索历史记录</text>
        </view>
        <switch :checked="saveSearchHistory" @change="toggleSaveSearchHistory"/>
      </view>
    </view>
    
    <!-- 个性化推荐设置 -->
    <view class="privacy-section">
      <text class="section-title">个性化推荐</text>
      
      <view class="privacy-item">
        <view class="item-left">
          <text class="item-icon">🎯</text>
          <text class="item-text">个性化内容推荐</text>
        </view>
        <switch :checked="personalizedRecommend" @change="togglePersonalizedRecommend"/>
      </view>
      
      <view class="privacy-item" @tap="navigateToAdSettings">
        <view class="item-left">
          <text class="item-icon">📢</text>
          <text class="item-text">广告个性化</text>
        </view>
        <text class="arrow-icon">→</text>
      </view>
    </view>
    
    <!-- 数据管理 -->
    <view class="privacy-section">
      <text class="section-title">数据管理</text>
      
      <view class="privacy-item" @tap="exportPersonalData">
        <view class="item-left">
          <text class="item-icon">📤</text>
          <text class="item-text">导出个人数据</text>
        </view>
        <text class="arrow-icon">→</text>
      </view>
      
      <view class="privacy-item" @tap="clearCache">
        <view class="item-left">
          <text class="item-icon">🧹</text>
          <text class="item-text">清除缓存</text>
        </view>
        <text class="cache-size">{{ cacheSize }}</text>
      </view>
      
      <view class="privacy-item" @tap="deleteAccount">
        <view class="item-left">
          <text class="item-icon">🗑️</text>
          <text class="item-text delete-text">删除账户</text>
        </view>
        <text class="arrow-icon">→</text>
      </view>
    </view>
    
    <!-- 隐私政策说明 -->
    <view class="privacy-policy-section">
      <text class="policy-text">
        请阅读我们的《隐私政策》了解更多关于数据收集和使用的详细信息。
        如对隐私保护有任何疑问，请联系客服。
      </text>
      <text class="contact-info">客服邮箱：support@example.com</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 基础隐私设置
      privateModeEnabled: false,
      allowViewProfile: true,
      allowFindByPhone: true,
      
      // 数据收集设置
      collectUsageData: true,
      collectLocationData: false,
      saveSearchHistory: true,
      
      // 个性化推荐设置
      personalizedRecommend: true,
      
      // 缓存信息
      cacheSize: '128MB'
    };
  },
  onLoad() {
    // 加载隐私设置
    this.loadPrivacySettings();
    // 更新缓存大小
    this.updateCacheSize();
  },
  methods: {
    // 加载隐私设置
    loadPrivacySettings() {
      // 模拟从本地存储加载隐私设置
      // 实际项目中应该从本地存储或后端获取设置信息
      const settings = [
        'privateModeEnabled',
        'allowViewProfile',
        'allowFindByPhone',
        'collectUsageData',
        'collectLocationData',
        'saveSearchHistory',
        'personalizedRecommend'
      ];
      
      settings.forEach(key => {
        const savedValue = uni.getStorageSync(key);
        if (savedValue !== '') {
          this[key] = JSON.parse(savedValue);
        }
      });
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 保存设置
    saveSetting(key, value) {
      this[key] = value;
      uni.setStorageSync(key, JSON.stringify(value));
    },
    
    // 显示提示
    showToast(message) {
      uni.showToast({
        title: message,
        icon: 'none'
      });
    },
    
    // 切换私密模式
    togglePrivateMode(e) {
      const isEnabled = e.detail.value;
      this.saveSetting('privateModeEnabled', isEnabled);
      
      if (isEnabled) {
        // 开启私密模式的额外处理
        this.showToast('私密模式已开启');
      } else {
        this.showToast('私密模式已关闭');
      }
    },
    
    // 切换允许查看主页
    toggleAllowViewProfile(e) {
      const isEnabled = e.detail.value;
      this.saveSetting('allowViewProfile', isEnabled);
      
      this.showToast(isEnabled ? '已允许他人查看您的主页' : '已禁止他人查看您的主页');
    },
    
    // 切换允许通过手机号找到我
    toggleAllowFindByPhone(e) {
      const isEnabled = e.detail.value;
      this.saveSetting('allowFindByPhone', isEnabled);
      
      this.showToast(isEnabled ? '已允许通过手机号找到您' : '已禁止通过手机号找到您');
    },
    
    // 切换收集使用数据
    toggleCollectUsageData(e) {
      const isEnabled = e.detail.value;
      this.saveSetting('collectUsageData', isEnabled);
      
      this.showToast(isEnabled ? '已开启使用数据收集' : '已关闭使用数据收集');
    },
    
    // 切换收集位置信息
    toggleCollectLocationData(e) {
      const isEnabled = e.detail.value;
      this.saveSetting('collectLocationData', isEnabled);
      
      this.showToast(isEnabled ? '已开启位置信息收集' : '已关闭位置信息收集');
    },
    
    // 切换保存搜索历史
    toggleSaveSearchHistory(e) {
      const isEnabled = e.detail.value;
      this.saveSetting('saveSearchHistory', isEnabled);
      
      if (!isEnabled) {
        // 如果关闭，提示是否清除已有的搜索历史
        uni.showModal({
          title: '清除搜索历史',
          content: '确定要清除所有搜索历史吗？',
          confirmText: '清除',
          success: (res) => {
            if (res.confirm) {
              // 清除搜索历史的逻辑
              this.showToast('搜索历史已清除');
            }
          }
        });
      } else {
        this.showToast('已开启搜索历史记录');
      }
    },
    
    // 切换个性化推荐
    togglePersonalizedRecommend(e) {
      const isEnabled = e.detail.value;
      this.saveSetting('personalizedRecommend', isEnabled);
      
      this.showToast(isEnabled ? '已开启个性化推荐' : '已关闭个性化推荐');
    },
    
    // 更新缓存大小
    updateCacheSize() {
      // 模拟获取缓存大小
      // 实际项目中可以调用微信API获取
      const size = Math.floor(Math.random() * 500) + 50; // 50-550MB
      this.cacheSize = `${size}MB`;
    },
    
    // 导航到广告设置
    navigateToAdSettings() {
      uni.navigateTo({
        url: '/pages/demo/ad-settings'
      });
    },
    
    // 导出个人数据
    exportPersonalData() {
      uni.showLoading({
        title: '准备导出...'
      });
      
      // 模拟导出个人数据
      setTimeout(() => {
        uni.hideLoading();
        uni.showModal({
          title: '数据导出',
          content: '您的个人数据已准备好导出，导出文件将包含您的账户信息、笔记、日程等数据。\n\n确定要继续导出吗？',
          confirmText: '继续',
          success: (res) => {
            if (res.confirm) {
              // 模拟下载过程
              uni.showLoading({
                title: '导出中...'
              });
              
              setTimeout(() => {
                uni.hideLoading();
                uni.showModal({
                  title: '导出成功',
                  content: '您的个人数据已导出成功，文件已保存到您的设备。',
                  showCancel: false
                });
              }, 2000);
            }
          }
        });
      }, 1000);
    },
    
    // 清除缓存
    clearCache() {
      uni.showModal({
        title: '清除缓存',
        content: `确定要清除应用缓存吗？\n当前缓存大小：${this.cacheSize}`,
        confirmText: '清除',
        confirmColor: '#ff4d4f',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '清除中...'
            });
            
            // 模拟清除缓存
            setTimeout(() => {
              uni.hideLoading();
              // 更新缓存大小
              this.cacheSize = '0MB';
              
              uni.showToast({
                title: '缓存已清除',
                icon: 'success'
              });
            }, 1000);
          }
        }
      });
    },
    
    // 删除账户
    deleteAccount() {
      uni.showModal({
        title: '删除账户',
        content: '警告：删除账户将永久清除您的所有数据，包括笔记、日程、联系人等，此操作无法撤销！\n\n确定要继续吗？',
        confirmText: '继续删除',
        confirmColor: '#ff4d4f',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            // 二次确认
            uni.showModal({
              title: '再次确认',
              content: '请再次确认删除账户，此操作不可撤销！',
              confirmText: '确认删除',
              confirmColor: '#ff4d4f',
              cancelText: '取消',
              success: (result) => {
                if (result.confirm) {
                  // 模拟删除账户
                  uni.showLoading({
                    title: '处理中...'
                  });
                  
                  setTimeout(() => {
                    uni.hideLoading();
                    
                    // 清除所有数据
                    uni.removeStorageSync('userInfo');
                    uni.removeStorageSync('token');
                    
                    // 跳转到登录页面
                    uni.reLaunch({
                      url: '/pages/demo/index'
                    });
                  }, 1500);
                }
              }
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.privacy-container {
  height: 100vh;
  background-color: #f8f9fc;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 顶部栏 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-btn {
  padding: 10rpx;
}

.back-icon {
  font-size: 32rpx;
  color: #333;
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.header-right {
  width: 50rpx;
}

/* 隐私保护说明 */
.privacy-intro {
  padding: 30rpx 40rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.intro-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

/* 隐私设置区域 */
.privacy-section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 30rpx;
  display: block;
}

.privacy-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
}

.privacy-item:last-child {
  border-bottom: none;
}

.item-left {
  display: flex;
  align-items: center;
}

.item-icon {
  font-size: 36rpx;
  margin-right: 20rpx;
}

.item-text {
  font-size: 32rpx;
  color: #333;
}

.item-text.delete-text {
  color: #ff4d4f;
}

.arrow-icon {
  font-size: 28rpx;
  color: #999;
}

.cache-size {
  font-size: 28rpx;
  color: #666;
}

/* 隐私政策说明 */
.privacy-policy-section {
  padding: 40rpx;
  background-color: #fff;
  margin-top: 20rpx;
}

.policy-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20rpx;
  display: block;
}

.contact-info {
  font-size: 26rpx;
  color: #999;
  display: block;
}

/* switch 样式 */
switch {
  transform: scale(0.8);
}
</style>